/*
* Copyright (c) 2025 Huawei Device Co., Ltd.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including but not limited to the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to provide persons with access to the Software
* subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGE OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/

import { Component, ReactNode } from 'react';
import './index.css';
import { AreaUtils } from '../../utils/AreaUtils';
import { AvoidAreaType } from '../../common/windowCommon';
import { Link } from 'react-router-dom';

const TAG = 'HOMEVIEW:'

class Home extends Component {
  state = {
    margins: {
      leftTopMargin: 0,
      rightTopMargin: 0,
      leftBottomMargin: 0,
      rightBottomMargin: 0,
      leftCenterMargin: 0,
      rightCenterMargin: 0
    },
    topMargin: AreaUtils.getInstance().getTopMargin()
  }

  reCulcAvoidArea = () => {
    AreaUtils.getAvoidAreaLocation().then((res) => {
      AreaUtils.getInstance().setAvoidValue(res.areaLocation, res.marginValue);
      const margins = AreaUtils.getAllMargin();
      this.setState({ margins: margins });
      console.debug(TAG, `All Margin Value is ${JSON.stringify(this.state.margins)}`);
    });
  };

  handleStatusBarChange = (event: any) => {
    const data = event.detail;
    const areaType = data.type;
    if (areaType === AvoidAreaType.TYPE_SYSTEM) {
      this.setState({ topMargin: AreaUtils.px2vp(data.area.topRect.height) });
      AreaUtils.getInstance().setTopMargin(this.state.topMargin);
    }
    if (areaType === AvoidAreaType.TYPE_CUTOUT) {
      this.reCulcAvoidArea();
    }
    if (areaType === AvoidAreaType.TYPE_NAVIGATION_INDICATOR) {
      let bottomMargin = AreaUtils.px2vp(data.area.bottomRect.height);
      AreaUtils.getInstance().setBottomMargin(bottomMargin);
    }
  }

  componentDidMount() {
    this.reCulcAvoidArea();
    window.addEventListener('resize', this.reCulcAvoidArea);
    window.addEventListener('statusBarChange', this.handleStatusBarChange);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.reCulcAvoidArea);
    window.removeEventListener('statusBarChange', this.handleStatusBarChange);
  }

  render(): ReactNode {
    return (
      <div className="entrance">
        <div className="top-buttons" style={{ paddingTop: `${this.state.topMargin + 8}px` }}>
          <img src={require("../../assets/home_pause.png")} alt="" className="top-image" style={{
            paddingLeft: `${this.state.margins.leftTopMargin + 16}px`,
          }} />
          <div className="right-buttons-group" style={{
            paddingRight: `${this.state.margins.rightTopMargin + 16}px`,
          }}>
            <img src={require("../../assets/mute.png")} alt="" className="top-image" />
            <img src={require("../../assets/rotate.png")} alt="" className="top-image" />
            <img src={require("../../assets/setting.png")} alt="" className="top-image" />
          </div>
        </div>

        <div className="middle-content">
          <img src={require("../../assets/home_icon.png")} alt="" className="image1" />
          <Link to='/Game'>
            <div className="button-container">
              <img src={require("../../assets/arrowhead.png")} alt="" className="arrowhead" />
              <img src={require("../../assets/start.png")} alt="" className="options" />
            </div>
          </Link>
          <div className="button-container">
            <img src={require("../../assets/arrowhead.png")} alt="" className="arrowhead" style={{ visibility: 'hidden' }} />
            <img src={require("../../assets/login.png")} alt="" className="options" />
          </div>
        </div>
      </div>
    );
  }
}

export default Home
